<template>
	<view class="content">
		<view class="nav">
			<view class="nav_item" :class="[index === data.navnum ? 'sel' : '']" v-for="(item, index) in data.nav" :key="index" @click="navtap(index)">{{ item.name }}</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in data.list" :key="index">
				<view class="title">
					<view class="shopname">订单号：{{ item.mchOrderNo }}</view>
					<view class="stats">{{ ordersta(item.status) }}</view>
				</view>
				<view class="goods">
					<order_good_item v-for="(items, indexs) in item.ordersItemBOList" :key="indexs" :item="items"></order_good_item>
				</view>
				<view class="time">购买时间：{{ item.createdDate }}</view>
				<view class="good_pay">
					<text style="margin-right: 44rpx">共{{ item.goodsCount }}件商品</text>
					<text style="font-size: 24rpx; color: #c32136">
						实际付款：￥
						<text style="font-size: 36rpx; color: #c32136; font-weight: 600">{{ item.payAmount }}</text>
					</text>
				</view>
				<view class="good_pay" v-if="item.returnAmount !== 0 && item.returnCount !== 0">
					<text style="margin-right: 44rpx">共退款{{ item.returnCount }}件</text>
					<text style="font-size: 28rpx; color: #28282b">实际退款：￥{{ item.returnAmount }}</text>
				</view>
				<view class="again" @click="todtl(item.id)">查看详情</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ordersta } from '@/utils/utils';
import { onLoad } from '@dcloudio/uni-app';
import { err, to, toast } from '@/utils/uniapi';
import { api } from '@/api/store_api';
import { reactive } from 'vue';
const data = reactive({
	nav: [
		{ name: '全部', status: '' },
		{ name: '已完成', status: 'SUCCESS' },
		{ name: '待付款', status: 'UNPAID' },
		{ name: '已取消', status: 'CANCEL' }
	],
	navnum: 0,
	list: [] as any[],
	odlist: [] as any[],
	page: 1,
	size: 20,
	pageTotal: 0
});
onLoad(() => {
	console.log(1);
	data.odlist = [];
	orderList();
});
async function orderList() {
	try {
		const { page, size, odlist, navnum, nav } = data;
		const { respCode, source, msg, pageTotal } = await api.orders_list({ page, size });
		if (respCode === 200) {
			const list = JSON.parse(source);
			console.log(list);
			const updatedOdlist = odlist.length === 0 ? list : odlist.concat(list);
			const filteredList = navnum === 0 ? updatedOdlist : filter(nav[navnum].status);
			data.odlist = updatedOdlist;
			data.pageTotal = pageTotal;
			data.list = filteredList;
		} else {
			toast(msg);
		}
	} catch (error) {
		err(error);
		throw error;
	}
}
function navtap(e: any) {
	try {
		if (e === 0) {
			data.list = data.odlist;
		} else {
			const status = data.nav[e].status;
			const list = filter(status);
			data.list = list;
		}
		data.navnum = e;
	} catch (error) {
		err(error);
		throw error;
	}
}
function filter(status: any) {
	const orders = data.odlist;
	const filteredList = orders.filter((cur: any) => cur.status === status);
	return filteredList;
}
function todtl(e: any) {
	to('/user/order/order?id=' + e);
}
</script>

<style scoped lang="scss">
.nav {
	width: 100%;
	height: 80rpx;
	border-radius: 200rpx;
	opacity: 1;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.nav_item {
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6);
	}
	.sel {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		border-bottom: 4rpx solid #c32136;
	}
}

.list {
	width: 100%;
	.item {
		width: 710rpx;
		/* height: 608rpx; */
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		margin: 24rpx auto;
		padding: 16rpx 40rpx 30rpx 14rpx;
		box-sizing: border-box;
		.title {
			width: 656rpx;
			padding-bottom: 8rpx;
			border-bottom: 2rpx solid #ebebf0;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.shopname {
				font-size: 24rpx;
				font-family: Inter-Regular, Inter;
				font-weight: 400;
				color: #28282b;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.stats {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Normal, Source Han Sans CN;
				font-weight: 350;
				color: #c32136;
			}
		}
		.goods {
			width: 656rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #ebebf0;
			padding-bottom: 12rpx;
		}
		.time {
			font-size: 20rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 42rpx;
		}
		.good_pay {
			text-align: right;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);
			line-height: 42rpx;
		}
		.again {
			width: 142rpx;
			height: 54rpx;
			background: #c32136;
			border-radius: 32rpx;
			text-align: center;
			line-height: 54rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #fff;
			margin-left: auto;
			margin-top: 18rpx;
		}
	}
}
</style>
